import phaser from 'phaser';
import NetClient from '../types/NetClient';

/** 备战场景，英雄选择 */
export default class Preparation extends phaser.Scene {
    private readyState: boolean = false;
    private clientNt: NetClient = null!;
    private roleKey: string = 'sanim_234051';
    private isInit: boolean = false;
    constructor() {
        super('Preparation');
    }

    preparationInit() {
        this.clientNt = window.client;

        if (this.clientNt != null && this.clientNt.stateConnect) {
            // this.roomId = info?.roomId;
            // this.setRoomInfo(info);

            // if (this.clientNt) {
            //     this.clientNt.currentObject = this;
            // }
            // this.send('getRoomPlayerList', { roomId: this.roomId });
            this.clientNt.currentObject = this;

        }
    }

    onNetworkRecv(status: boolean, action: string = '', data: any = null) {
        if (status == false) {
            console.log('网络异常');
            return;
        }
        if (action == 'loadGameScene') {
            this.scene.start('Game1V1');
        }
    }

    send(action: string, data: any = null) {
        if (this.clientNt.stateConnect == true) {
            this.clientNt.sendAction('Moba2D', action, data);
        }
    }

    initUi() {
        let gameWidth = <number>this.sys.game.config.width;
        let gameHeight = <number>this.sys.game.config.height;

        let img = this.add.image(0, 0, 'backgound2');
        img.setSize(gameWidth, gameHeight);
        this.tweens.add({
            targets: img,
            x: 300,
            y: 300,
            yoyo: true,
            ease: 'Linear',
            duration: 50000,
            repeat: -1
        });

        let role: SpineGameObject = null!;

        role = this.add.spine(gameWidth / 2, gameHeight / 2 + 100, 'sanim_234051', 'holdon', true);
        role.scaleX = 0.5;
        role.scaleY = 0.5;

        let body: Element = this.add.dom(gameWidth / 2, gameHeight / 2, 'div',
            'background:rgba(0,0,0,0);  position: relative; width:' + gameWidth + 'px; height:' + gameHeight + 'px;').node;

        body.innerHTML = `
            <div id="preparationSelect">
                <div class="preparationSelectItem preparationSelectItemSelected" key="sanim_234051">
                    <div style="background:url('assets/role/A.png'); 
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: 0px -8px;
                    ">
                    </div>
                </div>
                <div class="preparationSelectItem" key="sanim_224061">
                    <div style="background:url('assets/role/B.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: 0px -8px;">
                    </div>
                </div>
                <div class="preparationSelectItem" key="none">
                    <div style="background:url('assets/role/C.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: -5px -8px;">
                    </div>
                </div>
            </div>

            <!--div id="roleInfo">
                <h4>火女</h4>
            </div-->
            
            <div style="position:absolute; bottom:30px; left:calc(50% - 50px); width:100px;" id="startGame" class="GameUIButton">开始</div>
        `;

        let startGame = body.querySelector('#startGame');
        if (startGame) {

            startGame.addEventListener('click', () => {
                if (this.readyState == true) return;
                // this.scene.start('Game');
                if (startGame.innerHTML == '开始') {
                    this.readyState = true;
                    startGame.innerHTML = '等待进入游戏';
                    this.send('chooseRole', { roleKey: this.roleKey })
                }
            });
        }

        let preparationSelectItems = body.querySelectorAll('.preparationSelectItem');
        for (let i = 0; i < preparationSelectItems.length; i++) {
            preparationSelectItems[i].addEventListener('click', () => {
                if (this.readyState == true) return;
                this.roleKey = <string>preparationSelectItems[i].getAttribute('key');
                if (this.roleKey == 'none') {
                    return;
                }
                for (let j = 0; j < preparationSelectItems.length; j++) {
                    preparationSelectItems[j].classList.remove('preparationSelectItemSelected');
                }
                preparationSelectItems[i].classList.add('preparationSelectItemSelected');
                if (role != null) {
                    role.scaleX = 0;
                }

                role = this.add.spine(gameWidth / 2, gameHeight / 2 + 100, this.roleKey, 'holdon', true);
                role.scaleX = 0.5;
                role.scaleY = 0.5;

            })
        }
    }

    create() {
        console.log('Preparation create')
        this.readyState = false;
        this.initUi();
        this.preparationInit();
    }
}